<template>
  <div id="Tab">
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>class</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in student" :key="index">
          <td>{{ item.id }}</td>
          <td :class="{ del: item.del }">{{ item.name }}</td>
          <td>{{ item.class | change(select_list) }}</td>
          <td>
            <button @click="stop(item.id)" :disabled="item.del">
              是否毕业
            </button>
            <button @click="edit(item.id)" :disabled="item.del">编辑</button>
            <button @click="del(item.id)" :disabled="item.del">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "Tab",
  props: {
    student: {
      required: true,
    },
    
  },
  data() {
    return {
      //新增的隐藏
      show: false,
      //下拉框的选择
      select_list: [
        {
          id: 1,
          banji: "一班",
        },
        {
          id: 2,
          banji: "二班",
        },
        {
          id: 3,
          banji: "三班",
        },
      ],
      name: "",
      class_: "",
      id: "",
      //默认是新增
      flag: true,
      //绑定的类del
    };
  },
  filters: {
    change(val, obj) {
      const index = obj.findIndex((item) => item.id === val);
      return obj[index].banji;
    },
  },
  methods: {
    add() {
      this.show = !this.show;
    },
    Submit() {
      let sure = "";
      console.log(this.flag);
      if (this.flag) {
        sure = confirm("确认新增？");
        if (sure) {
          this.student.push({
            id: this.student.length + Math.round(Math.random() * 10),
            name: this.name,
            class: this.class_,
            del: false,
          });
          this.flag = true;
          this.show = !this.show;
        }
      } else {
        sure = confirm("确认编辑？");
        if (sure) {
          const index_ = this.student.findIndex(
            (item) => item.id === +this.id
          );
          this.student[index_].name = this.name;
          this.student[index_].class = this.class_;
          this.flag = false;
          this.show = !this.show;
        }
      }
    },
    del(id) {
      const sure = confirm("是否删除?");
      if (sure) {
        this.student.splice(id, 1);
      }
    },
    edit(id) {
      this.flag = false;
      this.id = id;
      if (!this.show) {
        this.show = !this.show;
      }
      const index_ = this.student.findIndex((item) => item.id === +id);

      this.name = this.student[index_].name;
      this.class_ = this.student[index_].class;
    },
    stop(id) {
      const sure = confirm("是否真的毕业?");
      if (sure) {
        const index_ = this.student.findIndex((item) => item.id === +id);
        this.student[index_].del = true;
      }
    },
  },
};
</script>
<style>
td,
th {
  border: 1px solid black;
  width: 300px;
  text-align: center;
}

table {
  margin-top: 10px;
  border: 1px solid black;
  border-collapse: collapse;
}
.del {
  text-decoration: line-through;
}
</style>
